<script>
//导入应用模板，并局部注册
import OverlapMapCard from '../../card/OverlapMapCard';
import * as types from '@/store/types';
import * as utils from '@/utils/helps';
import WorkSpaceQuery from '@/mixins/WorkspaceQuery';

//应用模板加载组件
export default {
  name: 'OverLapMapEdit',
  components: { OverlapMapCard },
  mixins: [WorkSpaceQuery],
  props: {},
  data() {
    return {
      isInitialized: false,
    };
  },
  computed: {
    allControl() {
      return this.$store.getters.controls;
    },
    controls() {
      if (Object.keys(this.allControl).length !== 0) {
        if (this.$store.getters.currentId === '') {
          this.$store.commit(types.UPDATA_APPLY_CURRENTID, this.$router.history.current.params.id);
          return this.allControl[this.$router.history.current.params.id];
        } else {
          return this.allControl[this.$store.getters.currentId];
        }
      } else {
        return {
          options: {},
        };
      }
    },
    appData() {
      return this.$store.state.app.appData;
    },
  },
  watch: {
    controls(newVal) {
      if (newVal.options.data) {
        this.initControl(newVal);
      }
    },
  },
  beforeMount() {
    if (Object.keys(this.allControl).length === 0) {
      this.getLastAppData();
    } else {
      const controlData = this.allControl[this.$store.getters.currentId];
      this.initControl(controlData);
    }
  },
  mounted() {
    this.$nextTick(() => {
      window.dispatchEvent(new Event('resize'));
    });
  },
  methods: {
    initControl(newVal) {
      if (!this.isInitialized) {
        this.isInitialized = true;
      }
    },
    closeEdit() {
      this.$router.push('/workspace/' + this.appData.id);
    },
    //保存应用
    saveEdit() {
      this.upDataAppConfig(
        {
          path: `${window.location.origin}/workspace/${this.appData.id}`,
          info: JSON.stringify(this.allControl),
        },
        {
          id: this.appData.id,
        }
      );
    },
    //提交store
    updataChartConfig() {},
  },
};
</script>

<template>
  <div class="layout">
    <Layout>
      <Header>
        <Row>
          <Col span="8">
          <span @click="closeEdit">退出编辑</span>
          </Col>
          <Col span="16">
          <span @click="saveEdit">保存编辑</span>
          </Col>
        </Row>
      </Header>
      <Content>
        <OverlapMapCard
          :all-options="controls.options"
          mode="edit"></OverlapMapCard>
      </Content>
    </Layout>
  </div>
</template>

<style lang="less" scoped>
.layout {
  background: #e8ebed;
  position: relative;
  overflow: hidden;

  .k-layout-header {
    width: '100%';
    color: #fff;

    .k-row {
      .k-col span:hover {
        cursor: pointer;
        color: #20a1ff;
      }
      .k-col:last-child {
        span {
          float: right;
        }
      }
      .k-col:first-child {
        span {
          float: left;
        }
      }
    }
  }

  .k-layout-content {
    height: calc(~'100vh - 64px');
  }
}
</style>
